<template>
    <!-- 账单记录 -->
    <view class="main" id="main">
        <!--记一笔-->
        <view class="add_bill">
            <u-avatar icon="edit-pen" bg-color="#0055ff" fontSize="25" @click="goAddBill()"></u-avatar>
        </view>
        <u-list v-if="height!=null && clazzList!=null" :height="height" :key="height" @scrolltolower="scrolltolower()"
                :preLoadScreen="1.5" enableBackToTop>
            <u-divider></u-divider>
            <u-list-item v-for="(item, index) in dataList" :key="index">
                <u-row customStyle="margin-bottom: 10rpx" @click="selBill(item)">
                    <u-col span="1"></u-col>
                    <u-col span="2">
                        <u-icon size="25" :name="clazzFormatByUrl(item.billClazz)"></u-icon>
                    </u-col>
                    <u-col span="6">
                        <text> {{item.billClazz | clazzFormatByName(clazzList)}}</text>
                        <br>
                        <u--text type="info" :lines="1" :size="13" :text="item.note"></u--text>
                        <br>
                        <u--text type="info" :lines="1" :size="13" :text="item.billDate"></u--text>
                    </u-col>
                    <u-col span="1"></u-col>
                    <u-col span="2">
                        <text> {{item.money}}￥</text>
                    </u-col>
                </u-row>
                <u-divider></u-divider>
            </u-list-item>
            <u-loadmore :status="loading"/>
        </u-list>

    </view>
</template>

<script>
    export default {
        name: "recordList",
        filters: {
            clazzFormatByName(val, list) {
                let temp = list.filter(x => x.id == val);
                if (temp.length > 0) {
                    return temp[0].name;
                } else {
                    return null;
                }
            },
        },
        watch: {
            '$store.state.yearMonth': {
                deep: true,
                handler: function (newValue, oldValue) {
                    this.refresh();
                }
            },
        },
        data() {
            return {
                height: null,
                //分类集合
                clazzList: null,
                //列表数据
                dataList: [],
                loading: "loadmore",
                // 分页参数
                page: {
                    total: 0,  // 总记录数
                    currentPage: 1,  // 当前页数
                    pageSize: 10,  // 每页显示多少条
                    sortdatafield: "create_date",  // 排序字段名
                    sortorder: "desc"  // 排序方式 asc/desc
                },
            }
        },
        mounted() {
            this.init();

        },

        methods: {
            /**
             *  选中流失
             * @param row
             */
            selBill(row){
                //切换路由到账单修改
                uni.navigateTo({
                    url: '/pages/record/index?record='+JSON.stringify(row)
                })
            },

            /**
             * 过滤图标
             * @param val
             * @returns {null|*}
             */
            clazzFormatByUrl(val) {
                let temp = this.clazzList.filter(x => x.id == val);
                if (temp.length > 0) {
                    return temp[0].url;
                } else {
                    return null;
                }
            },

            scrolltolower() {
                if (this.loading == 'loadmore') {
                    if (this.dataList.length < this.page.total) {
                        this.page.currentPage++;
                    } else {
                        return;
                    }
                    this.getList();
                }
            },

            //查询本月支出
            getList() {
                this.loading = "loading";
                this.$request("/bill-record/findPageByMe", Object.assign(this.page, this.$store.state.yearMonth)).then(res => {
                    this.dataList.push(...res.records);
                    this.page.total = res.total;
                    if (this.dataList.length == res.total) {
                        this.loading = "nomore";
                    } else {
                        this.loading = "loadmore";

                    }
                }).catch(err => {
                    console.log("异常了：" + err)
                })
            },


            //刷新表格
            refresh() {
                //重置数据
                this.page = {
                    total: 0,  // 总记录数
                    currentPage: 1,  // 当前页数
                    pageSize: 10,  // 每页显示多少条
                    sortdatafield: "create_date",  // 排序字段名
                    sortorder: "desc"  // 排序方式 asc/desc
                };
                this.dataList = [];
                this.getList();
            },

            init() {
                //获取分类
                this.$request("/bill-clazz/findList").then(res => {
                    this.clazzList = res.map(x => {
                        x.url = this.$tool.getResources(x.icon);
                        return x;
                    });
                })
                const query = uni.createSelectorQuery().in(this);
                query.select('#main').boundingClientRect(data => {
                    this.height = data.height - 80;
                }).exec();
                this.getList();
            },


            //go添加账单
            goAddBill() {
                uni.navigateTo({
                    url: '/pages/record/index'
                })
            }
        }
    }
</script>

<style lang="scss">
    .main {
        width: 100%;
        height: 100%;
        -ms-overflow-y: hidden;

        .u-list {
            height: 0 !important;
            flex: 1 !important;
        }

        .add_bill {
            z-index: 30;
            position: fixed;
            bottom: 230rpx;
            right: 50rpx;
        }

        .icon_back {
            margin-top: 10rpx;
            padding: 25rpx;
            background: #1af94f;
            border-radius: 50%;
        }

    }
</style>
